/**
 * Created by yang.fan on 2017/11/17.
 */
import React from 'react';
import {Modal, Button,Row,Col,Cascader,Input,Form,message} from 'antd';
import styles  from './Amap.less';
import { request } from '../../config/request'
const { Component } = React
import { cloneDeep,isEqual } from 'lodash';
// 引入全局配置
import config from '../../config/config'
// 异步静态资源
import LoadAssets from 'load-assets'
// import {QueryCondition} from 'widget/Grid/Grid'
import AdvanceSearch from '../CollapsiblePanels/AdvanceSearch'
import $ from 'jquery'
import heatmapData from './heatmapData'
/*
 *
 * 地图组件
 *
 */
const FormItem = Form.Item;
const {Search} = Input
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 19 },
};


export default class Amap extends Component {
  // 构造函数
  constructor(props, context) {
    super(props, context);
    this.state = {
      queryList: cloneDeep(props.queryList),
      //根据经纬度获取逆地理位置
      address: '',

      //按钮的显示隐藏
      btnDiv: this.props.btnDiv || true,

      //开启关闭按钮
      visible: this.props.visible || false,

      // 地图实例
      map: null,

      // 图标实例
      marker: null,

      //经纬度 默认显示北京首都的经纬度
      latAndLon: this.props.latAndLon || [113.437218, 23.103965],

      //是否开启地图的点击功能
      clickRes: this.props.clickRes || false,
      //省市配置
      options:this.props.options,
      //选择的地址
      selectAddress:'',
      lnglats:this.props.markers||[],
      markers: [],
      heatmap:null,//热力图实例
      mapType:this.props.mapType||1,//地图类型 1.打点图 2.热力图
    }

  }

  // 加载静态资源及地图
  loadAssetsAndMap(key){
    let THIS = this
    // 加载地图所需静态资源
    let assetsArray = [
      'https://cache.amap.com/lbs/static/main1119.css',
      'https://cache.amap.com/lbs/static/es5.min.js',
      'https://webapi.amap.com/maps?v=1.4.10&key=' +'7e61745f0e479ccedbcc70071ec3f690'
    ]
    // 加载静态资源
    new LoadAssets(assetsArray, function(){
      // DOM加载完成之后，再加载地图
      console.log(THIS.props)
      if(THIS.props.latAndLon.length == 0||!THIS.props.latAndLon[0]){
        THIS.initMapfrist()
      }else{
        THIS.initMap()
      } 
    })
  }

  

  initMapfrist(){
    let self = this
    var map = new AMap.Map(self.refs.container, {
      resizeEnable: true
    });
    map.plugin('AMap.Geolocation', function() {
      var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,//是否使用高精度定位，默认:true
          timeout: 10000,          //超过10秒后停止定位，默认：5s
          buttonPosition:'RB',    //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
          GeoLocationFirst:true,
      });
      map.addControl(geolocation);
      geolocation.getCurrentPosition(function(status,result){
          if(status=='complete'){
              console.log(result.position.lng, result.position.lat)
              self.setState({
                latAndLon:[result.position.lng, result.position.lat]
              },()=>{
                self.initMap()
              })
          }else{
            geolocation.getCityInfo(function(status,result){
              self.setState({
                latAndLon:result.center
              },()=>{
                self.initMap()
              })
            })
            console.log(result)
          }
      });
  });
  }

    
  // 添加覆盖物群组
   addOverlayGroup(markerss) {
       this.removeOverlayGroup()
       let {lnglats,markers,map,heatmap} = this.state

       //热力图存在则清空
       
       if(heatmap != null){
            heatmap.setMap(null);
            this.setState({
                heatmap
            })
        }

        //开始处理点坐标
       markers = []
       lnglats = lnglats.length>0?lnglats:markerss
        for (var i = 0; i < lnglats.length; i++) {
        var lnglat = lnglats[i];
        // 创建点实例
        var marker = new AMap.Marker({
            position: new AMap.LngLat(lnglat.lng, lnglat.lat),
            icon:new AMap.Icon({            
                image: `https://zysj-pro.oss-cn-shenzhen.aliyuncs.com/zysq-miniprogram/images/map/iconSite${lnglat.status}.png`,
                size: new AMap.Size(128, 128),  //图标大小
                imageSize: new AMap.Size(42,42)
            }),
            extData: {
                id: i + 1
            }
        });
        markers.push(marker);
    }
    this.setState({
        markers
    })
    // 创建覆盖物群组，并将 marker 传给 OverlayGroup
    var overlayGroups = new AMap.OverlayGroup(markers);
    map.add(overlayGroups);
    
    }
    removeOverlayGroup() {
        let {map,markers} = this.state
        this.setState({
            markers:[]
        })
        map.clearMap();
     }

    //  热力图
    heatmapFun(data){
        var _this = this
        // this.removeOverlayGroup()
        let {map,markers,heatmap} = this.state

        //点坐标存在则清空所有覆盖物
        if(markers.length>0){
            this.removeOverlayGroup()
        }
        if (!this.isSupportCanvas()) {
            alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
        }
        console.log(heatmap)
        if(heatmap != null){
            heatmap.setMap(null);
          }

        // var heatmap;
        map.plugin(["AMap.Heatmap"], function () {
            //初始化heatmap对象
            heatmap = new AMap.Heatmap(map, {
                radius: 25, //给定半径
                opacity: [0, 0.8],
                gradient:{
                    0.5: 'blue',
                    0.65: 'rgb(117,211,248)',
                    0.7: 'rgb(0, 255, 0)',
                    0.9: '#ffea00',
                    1.0: 'red'
                }
                 
            });
            //设置数据集：该数据为北京部分“公园”数据
            heatmap.setDataSet({
                data: data,
                max: 100
            });
            _this.setState({
                heatmap
            })
        });
    }

    //判断浏览区是否支持canvas
    isSupportCanvas() {
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }
   
  // 加载地图实例
  initMap(){
    let THIS = this
    console.log(THIS.state.latAndLon)
    // 创建地图实例
    let map = new AMap.Map(THIS.refs.container, {
      resizeEnable: true,
    //   zoom:13,//地图显示的缩放级别
    //   center: THIS.state.latAndLon,//地图中心点
    });

    // 添加缩放地图工具
    if(map){
      map.plugin(["AMap.ToolBar"], function() {
        map.addControl(new AMap.ToolBar());
      });
      if(location.href.indexOf('&guide=1')!==-1){
        map.setStatus({scrollWheel:false})
      }
    }

    // 放到状态机
    this.setState({map})

  }

  //地理编码
//   getLatAddress(address){
//     var self =this
//     let obj = { 
//       address,
//       key: config.mapCfg.webServkey,
//     };
//     $.ajax({
//       type: 'GET',
//       url: 'https://restapi.amap.com/v3/geocode/geo',
//       data:obj,
//       contentType:'application/x-www-form-urlencoded; charset=UTF-8',
//       success: function (data) {
//           //console.log(data)
//           //赋值地址
//           let result
//           if(data.geocodes.length){
//             data.geocodes[0].location.split(',')
//             // 放到状态机
//             self.setState({latAndLon:result},()=>{
//               self.initMap()
//             })
//           }else{
//             message.error('根据地址查询位置失败');
//           }
          
//       },
//       error: function (xhr, type) {
//         alert('出错了, 请重试')
//       }
//     })
//   }



  

  //准备：即将被重新渲染，状态未变化
  componentWillUpdate(nextProps, nextState) {}

  //完成：正在被重新渲染，状态已变化
  componentDidUpdate(prevProps, prevState) {
  }

  // 已加载组件，收到新属性时调用
  componentWillReceiveProps(nextProps) {
    // console.log('nextProps: ',nextProps)
    let {map} = this.state
   
    // console.log(isEqual(this.state.latAndLon,nextProps.latAndLon))
    if(isEqual(this.state.latAndLon,nextProps.latAndLon)==false){
        let {latAndLon} = nextProps
        if(map){
            map.setCenter([latAndLon.longitude, latAndLon.latitude]);
            map.setZoom(10)
        }            
            
        if(nextProps.mapType==1){
            this.addOverlayGroup(nextProps.markers)
        }
        if(nextProps.mapType==2){
            this.heatmapFun(nextProps.heatmapData)
        }
    }
  }

  // 插入真实 DOM
  componentDidMount() {
    let THIS = this;
    // 加载Web服务地图实例
   THIS.loadAssetsAndMap(config.mapCfg.webServkey)
  }

  render() {
    let THIS = this;
    let {selectAddress} =this.state
    return (
        <div>
            <div className={styles.aMapInst} ref="container"></div>
            {/* <button onClick={()=>{this.addOverlayGroup();}}>添加</button>
            <button onClick={()=>{this.removeOverlayGroup();}}>移除</button> */}
        </div>
    )
  }


}


